<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>Mosaic - Shop Item</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/color-styles.css" rel="stylesheet">
    <link href="css/ui-elements.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    
    <!-- Resources -->
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/lightbox.css" rel="stylesheet">
    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500,400italic,500italic,700italic' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="body-green">

    <!-- Extra Bar -->
    <div class="mini-navbar mini-navbar-dark hidden-xs">
      <div class="container">
        <div class="col-sm-12">
          <a href="#" class="first-child"><i class="fa fa-envelope"></i> Email<span class="hidden-sm">: contact@example.com</span></a>
          <span class="phone">
            <i class="fa fa-phone-square"></i> Tel.: +0 (000) 000-00-00
          </span>
          <a href="sign-up.html" class="pull-right"><i class="fa fa-arrow-circle-down"></i> Sign Up</a>
          <a href="sign-in.html" class="pull-right"><i class="fa fa-sign-in"></i> Sign In</a>
          <a href="#" class="pull-right" id="nav-search"><i class="fa fa-search"></i> Search</a>
          <a href="#" class="pull-right hidden" id="nav-search-close"><i class="fa fa-times"></i></a>
          <!-- Search Form -->
          <form class="pull-right hidden" role="search" id="nav-search-form">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="navbar navbar-dark navbar-static-top" role="navigation">
      <div class="container">

        <!-- Navbar Header -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><i class="fa fa-th-large"></i> The Mosaic <span class="hidden-sm">Business Template</span></a>
        </div> <!-- / Navbar Header -->

        <!-- Navbar Links -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html" class="bg-hover-color">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="about-us.html" class="bg-hover-color">About Us</a></li>
                <li><a href="coming-soon.html" class="bg-hover-color">Coming Soon</a></li>
                <li><a href="contact-us.html" class="bg-hover-color">Contact Us</a></li>
                <li><a href="dummy.html" class="bg-hover-color">Dummy Page</a></li>
                <li><a href="help-center.html" class="bg-hover-color">Help Center</a></li>
                <li><a href="help-answer.html" class="bg-hover-color">Help Item</a></li>
                <li><a href="pricing-table.html" class="bg-hover-color">Pricing Table</a></li>
                <li><a href="responsive-video.html" class="bg-hover-color">Responsive Video</a></li>
                <li><a href="services.html" class="bg-hover-color">Services</a></li>
                <li><a href="sign-in.html" class="bg-hover-color">Sign In</a></li>
                <li><a href="sign-in-alt.html" class="bg-hover-color">Sign In Option</a></li>
                <li><a href="sign-up.html" class="bg-hover-color">Sign Up</a></li>
                <li><a href="sign-up-alt.html" class="bg-hover-color">Sign Up Option</a></li>
                <li><a href="404-error.html" class="bg-hover-color">404 Error Page</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html" class="bg-hover-color">Portfolio</a></li>
                <li><a href="portfolio-isotope.html" class="bg-hover-color">Portfolio Isotope</a></li>
                <li><a href="portfolio-item.html" class="bg-hover-color">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Blog <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="blog.html" class="bg-hover-color">Blog</a></li>
                <li><a href="blog-post.html" class="bg-hover-color">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Shop <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="shop.html" class="bg-hover-color">Shop Index</a></li>
                <li><a href="shop-products.html" class="bg-hover-color">Shop Products</a></li>
                <li><a href="shop-item.html" class="bg-hover-color">Shop Item</a></li>
                <li><a href="shop-cart.html" class="bg-hover-color">Shopping Cart</a></li>
                <li><a href="user-profile.html" class="bg-hover-color">User Profile</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="ui-elements.html#buttons" class="bg-hover-color">Buttons</a></li>
                <li><a href="ui-elements.html#panels" class="bg-hover-color">Panels</a></li>
                <li><a href="ui-elements.html#info-boards" class="bg-hover-color">Info Boards</a></li>
                <li><a href="ui-elements.html#navs" class="bg-hover-color">Navs</a></li>
                <li><a href="ui-elements.html#headlines" class="bg-hover-color">Headlines</a></li>
              </ul>
            </li>
          </ul>

          <!-- Search Form (xs) -->
          <form class="navbar-form navbar-left visible-xs" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Go!</button>
          </form> <!-- / Search Form (xs) -->

        </div> <!-- / Navbar Links -->
      </div> <!-- / container -->
    </div> <!-- / navbar -->

    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3 class="primary-font">Shop Item</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="index.html">Home</a></li>
                <li><a href="shop.html">Shop</a></li>
                <li class="active">Item</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container shop-item">
        <div class="row">
          <div class="col-sm-9">
            <div class="row">
              <div class="col-sm-6">
                <div class="product-img">
                  <a href="img/product-1.jpg" data-lightbox="products">
                    <img src="img/product-1.jpg" class="img-responsive main" alt="...">
                  </a>
                  <div class="row">
                    <div class="col-xs-4">
                      <a href="img/product-1.jpg" data-lightbox="products">
                        <img src="img/product-1.jpg" class="img-responsive" alt="...">
                      </a>
                    </div>
                    <div class="col-xs-4">
                      <a href="img/product-2.jpg" data-lightbox="products">
                        <img src="img/product-2.jpg" class="img-responsive" alt="...">
                      </a>
                    </div>
                    <div class="col-xs-4">
                      <a href="img/product-3.jpg" data-lightbox="products">
                        <img src="img/product-3.jpg" class="img-responsive" alt="...">
                      </a>
                    </div>
                  </div> <!-- / .row -->
                </div>
              </div>
              <div class="col-sm-6">
                <h3 class="primary-font first-child">Product Title</h3>
                <ul class="rating list-inline">
                  <li><i class="fa fa-star"></i></li>
                  <li><i class="fa fa-star"></i></li> 
                  <li><i class="fa fa-star"></i></li>
                  <li><i class="fa fa-star"></i></li>
                  <li><i class="fa fa-star"></i></li>
                </ul>
                <span class="text-muted reviews">(12 reviews)</span>
                <p class="text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.
                </p>
                <div class="price-block">
                  <span class="price">US $99,99 x</span>
                  <input type="number" name="pcs" value="1" class="form-control">
                </div>
                <br />
                <a class="btn btn-color" href="#"><i class="fa fa-shopping-cart"></i> Add to cart</a>
              </div>
            </div>

            <!-- Item Description -->
            <div class="row">
              <div class="col-sm-12">
                <h3 class="headline text-color">
                  <span class="border-color">Product Details</span>
                </h3>
                <p>
                  Nunc in neque nec arcu vulputate ullamcorper. Ut id orci ac arcu consectetur fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis hendrerit enim id arcu lacinia, id commodo ante semper. Sed vel ante nec nisi vestibulum congue. Pellentesque non lacus in tortor rutrum tristique.
                </p>
              </div>
            </div> <!-- / .row -->
            <div class="row">
              <div class="col-sm-12">
                <h3 class="headline text-color">
                  <span class="border-color">Similar Products</span>
                </h3>
                <div class="row">
                  <div class="col-sm-4">
                    <div class="shop-product featured">
                      <a href="shop-item.html"><img src="img/product-1.jpg" class="img-responsive" alt="..."></a>
                      <a href="shop-item.html"><h5 class="primary-font">Product #1</h5></a>
                      <p class="text-muted">
                        Nunc in neque nec arcu vulputate ullamcorper.
                      </p>
                      <p class="price">
                        <span class="old">$80,99</span>
                        <span class="new">$59,99</span>
                      </p>
                      <a href="#" class="btn btn-sm btn-color"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="shop-product">
                      <a href="shop-item.html"><img src="img/product-2.jpg" class="img-responsive" alt="..."></a>
                      <a href="shop-item.html"><h5 class="primary-font">Product #2</h5></a>
                      <p class="text-muted">
                        Nunc in neque nec arcu vulputate ullamcorper.
                      </p>
                      <p>
                        $200,00
                      </p>
                      <a href="#" class="btn btn-sm btn-color"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="shop-product">
                      <a href="shop-item.html"><img src="img/product-3.jpg" class="img-responsive" alt="..."></a>
                      <a href="shop-item.html"><h5 class="primary-font">Product #3</h5></a>
                      <p class="text-muted">
                        Nunc in neque nec arcu vulputate ullamcorper.
                      </p>
                      <p>
                        $50,00
                      </p>
                      <a href="#" class="btn btn-sm btn-color"><i class="fa fa-shopping-cart"></i> Add to cart</a>
                    </div>
                  </div>
                </div> <!-- / .row -->
              </div>
            </div> <!-- / .row -->
          </div>
          <div class="col-sm-3">
            <!-- Categories -->
            <div class="shop-category first-child">Categories</div>
            <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#" data-toggle="tab">Books</a></li>
              <li><a href="#" data-toggle="tab">Movies</a></li>
              <li><a href="#" data-toggle="tab">Music</a></li>
              <li><a href="#" data-toggle="tab">Computers</a></li>
              <li><a href="#" data-toggle="tab">Clothing</a></li>
            </ul>

            <!-- Search -->
            <div class="shop-category">Search</div>
            <form role="form" class="shop-search">
              <div class="form-group">
                <label for="categories" class="sr-only">Select category</label>
                <select class="form-control" id="categories">
                  <option>Select category</option>
                  <option>Books</option>
                  <option>Movies</option>
                  <option>Music</option>
                  <option>Computers</option>
                  <option>Clothing</option>
                </select>
              </div>
              <div class="form-group">
                <label for="query" class="sr-only">Search</label>
                <input type="text" class="form-control" placeholder="Looking for..." id="query">
              </div>
              <button class="btn btn-color">Search</button>
            </form>
          </div>
        </div> <!-- / .row -->
      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

    <!-- Footer -->
    <footer class="footer-dark">
      <div class="container">
        <div class="row">
          <!-- Contact Us -->
          <div class="col-sm-4">
            <h3 class="text-color"><span class="border-color">Contact Us</span></h3>
            <div class="content">
              <p>
              San Francisco, CA 94101<br />
              1987 Lincoln Street<br />
              Phone: +0 000 000 00 00<br />
              Fax: +0 000 000 00 00<br />
              Email: <a href="#">admin@mysite.com</a>
              </p>
            </div>
          </div>
          <!-- Social icons -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Go Social</span></h3>
            <div class="content social">
              <p>Stay in touch with us:</p>
              <ul class="list-inline">
                  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="#" class="plus"><i class="fa fa-google-plus"></i></a></li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
          <!-- Subscribe -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Subscribe</span></h3>
            <div class="content">
              <p>Enter your e-mail below to subscribe to our free newsletter.<br />We promise not to bother you often!</p>
              <form class="form" role="form">
                <div class="row">
                  <div class="col-sm-8">
                    <div class="input-group">
                      <label class="sr-only" for="subscribe-email">Email address</label>
                      <input type="email" class="form-control" id="subscribe-email" placeholder="Enter email">
                      <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">OK</button>
                      </span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <hr>
          </div>
        </div>
        <!-- Copyrights -->
        <div class="row">
          <div class="col-sm-12">
            <p>&copy; Mosaic 2014. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
          </div>
        </div>
      </div>
    </footer>

    <!-- Style Toggle -->
    <div class="style-toggle text-left hidden-xs">
      <i class="fa fa-gears style-toggle-btn"></i>
      <div class="style-toggle-header text-center">
        Navbar Type
      </div>
      <!-- Navbar Type -->
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-dark" value="opt-navbar-dark" checked>
            Navbar Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-white" value="opt-navbar-white">
            Navbar White
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-mixed" value="opt-navbar-mixed">
            Navbar Mixed
          </label>
        </div>
      </div>
      <!-- Color Styles-->
      <div class="style-toggle-header text-center">
        Color Styles
      </div>
      <div class="style-toggle-body text-center">
        <ul class="colors list-inline">
          <li class="green"></li>
          <li class="blue"></li>
          <li class="orange"></li>
          <li class="red"></li>
        </ul>
      </div>
      <!-- Footer Type -->
      <div class="style-toggle-header text-center">
        Footer Type
      </div>
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-dark" value="opt-footer-dark" checked>
            Footer Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-white" value="opt-footer-white">
            Footer White
          </label>
        </div>
        <hr>
        <a href="theme-faq.html"><i class="fa fa-question-circle"></i> Using color schemes on a production site.</a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
    <script src="js/custom.js"></script>

</body></html>